<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            /* color: #fff; */

        }

        body {
            width: 100%;
            height: 100%;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            line-height: 80px;
            font-size: 30px;
            width: 1024;
            height: 80px;
            background-color: #2980b9;

        }

        .left {
            width: 198px;
            height: 900px;
            background-color: #2980b9;
            float: left;
        }

        .left ul li {
            /* position: relative; */
            width: 198px;
            color: #fff;
            font-size: 24px;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
            /* float: left; */

        }

        .liang {
            background-color: #1f618d;
        }

        .right {

            width: 86%;
            height: 900px;
            /* border: 1px solid#000; */
            float: left;
        }

        input {
            padding-left: 10px;

            /* margin-top: 70px; */
            margin-left: 56px;
            width: 435px;
            height: 55px;
            border-radius: 10px;
            font-size: 20px;
            color: #000;
        }

        button {
            width: 125px;
            height: 56px;
            background-color: #5db85b;
            font-size: 24px;
            color: #fff;
            border-radius: 10px;
            border: none;
            cursor: pointer;

        }

        .box {
            display: flex;
            align-items: center;
            margin-top: 70px;
        }
        .right  .add{
           width: 189px;
           height: 60px;
           background-color: #5db85b;
           margin-top: 40px;
           margin-left: 50px;

        }
        .right table{
            margin: 20px 0;
            width: 100%;
            line-height: 40px;
            text-align: center;
        }
        .right table tr th{
            max-width: 200px;
        }
        .right table tr th:first-child, .right table tr td:first-child{
            text-align: left;
        }
        .right .foot{
            text-align: center;
            line-height: 40px;
            
        }
        .right .foot span{
            border: 1px solid #ccc;
            padding: 0 30px;
            display: inline-block;
            cursor: pointer;
        }
    </style>

</head>

<body>
    <header>
        <span>9466云专题</span>
        <span><span class="iconfont icon-yonghu"></span>&nbsp;龙猫(9466云专题)</span>
    </header>
    <div class="left">
        <ul>
            <li><span class="iconfont icon-home"></span>&nbsp;首页</li>
            <li><span class="iconfont icon-zhuantiguanli"></span>&nbsp;专题</li>
            <li class="liang"><span class="iconfont icon-yonhu"></span>&nbsp;用户</li>
            <li><span class="iconfont icon-shezhi"></span>&nbsp;设置</li>
            <li><span class="iconfont icon-xitongrizhi"></span>&nbsp;日志</li>
        </ul>
    </div>
    <div class="right">
        <div class="box"><input type="text" placeholder="搜索用户">
            &nbsp;
            <button>搜索</button></div>
            <button class="add"> + 添加用户</button>
        <table>
            <thead>
                <tr>
                    <th>邮箱(用户)</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>所属组</th>
                    <th>管理员</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
               <!--  <tr>
                    <td>123123123@qq.com</td>
                    <td>李彦慧</td>
                    <td>13611129070</td>
                    <td>编辑组</td>
                    <td>是</td>
                    <td> <span class="statusok">正常</span> </td>
                    <td> <span>编辑</span> <span>删除</span> </td>
                </tr>
                <tr>
                    <td>123123123@qq.com</td>
                    <td>李彦慧</td>
                    <td>13611129070</td>
                    <td>编辑组</td>
                    <td>是</td>
                    <td> <span class="statusok">正常</span> </td>
                    <td> <span>编辑</span> <span>删除</span> </td>
                </tr>
                <tr>
                    <td>123123123@qq.com</td>
                    <td>李彦慧</td>
                    <td>13611129070</td>
                    <td>编辑组</td>
                    <td>是</td>
                    <td> <span class="statusok">正常</span> </td>
                    <td> <span>编辑</span> <span>删除</span> </td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot">
            <span>上一页</span>
            <span>下一页</span>
        </div>
    </div>
</body>
</html>
<script src="./04-ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>
<script src="./axios.min.js"></script>
<script>
    render(data,list)
    function render(data){
        var str=data.map((item,index)=>{
            return `<tr>
            <td>${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.ingroup}</td>
                    <td>${item.isadmin?'是':'否'}</td>
                    <td> <span class="statusok">${item.status?'正常':'异常'}</span> </td>
                    <td> <span>编辑</span> <span>删除</span> </td>
                    </tr>
            `
        }).join('')
            document.querySelector('tbody').innerHTML = str;
    }
</script>
